<template>
  <!-- <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="(item, index) in images" :key="index">
      <img :src="item" alt="Image" class="carousel-image"/>
    </el-carousel-item>
  </el-carousel> -->
  <div>
    <div class="carousel">
      <div class="carousel-item">
        <div class="introduction">
          <h2>欢迎来到测盟汇管理系统</h2>
          <p>中国电子质量管理协会</p>
          <p>计算机软硬件和信息系统质量测评分会是中国电子质量管理协会设立的17个分支机构之一。分会可以对计算机软硬件和信息系统所有滑齿的，现有的风险进行风险分析，针对自愿申请参入的测评单位的能力进行认证，公正的能力评审，最终给出能力评审结论。在未来，测盟汇将继续加强自身能力建设，深化各界合作，推动计算机软硬件和信息系统质量测评行业的发展。</p>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="introduction">
        <h2>资讯要闻</h2>
        <ul>
          <li v-for="(info, index) in infoNews" :key="index">{{ info }} ...... {{ date }}</li>
        </ul>
      </div>
      <div class="announcement">
        <h2>通知公告</h2>
        <ul>
          <li v-for="(announcement, index) in announcements" :key="index">{{ announcement }} ...... {{ date }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const images = ref([
  '@/assets/home1.png',
  console.log(111),
  '@/assets/home2.png',
  '@/assets/home3.png',
  '@/assets/home4.png',
  // '@/assets/home5.png'
])

const infoNews = ref([
  '资讯内容1: 这里是资讯内容',
  '资讯内容2: 这里是资讯内容',
  '资讯内容3: 这里是资讯内容',
  '资讯内容4: 这里是资讯内容',
  '资讯内容5: 这里是资讯内容'
])

const announcements = ref([
  '公告内容1: 这里是公告内容',
  '公告内容2: 这里是公告内容',
  '公告内容3: 这里是公告内容',
  '公告内容4: 这里是公告内容',
  '公告内容5: 这里是公告内容'
])

const date = '2024.5.1'

onMounted(() => {
  const carousel = document.querySelector('.carousel')
  if (carousel) {
    let index = 0
    setInterval(() => {
      index = (index + 1) % 1
      carousel.scrollTo({
        left: index * carousel.clientWidth,
        behavior: 'smooth'
      })
    }, 3000)
  }
})
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.carousel {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 300px;
  justify-content: center;
  align-items: center;
}

.carousel-item {
  min-width: 100%;
  transition: transform 3s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.introduction {
  padding: 20px;
  font-size: 18px;
}

.announcement {
  padding: 20px;
  font-size: 18px;
}

.content {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.introduction, .announcement {
  width: 45%;
}

h2 {
  margin-bottom: 10px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}
</style>

